// 引入js-cookie库用于操作浏览器Cookie
import Cookies from 'js-cookie'

// 定义模块的初始状态
const state = {
  // 侧边栏状态
  sidebar: {
    // 从Cookie中获取侧边栏的打开/关闭状态，默认为打开状态
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    // 是否启用过渡动画
    withoutAnimation: false
  },
  // 设备类型，默认为桌面端
  device: 'desktop'
}

// 修改state的同步方法（mutations）
const mutations = {
  // 切换侧边栏的折叠/展开状态
  TOGGLE_SIDEBAR: state => {
    // 反转sidebar.opened的值
    state.sidebar.opened = !state.sidebar.opened
    // 启用过渡动画
    state.sidebar.withoutAnimation = false
    // 将状态保存到Cookie中，便于页面刷新后保持状态
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1) // 1表示打开状态
    } else {
      Cookies.set('sidebarStatus', 0) // 0表示关闭状态
    }
  },

  // 关闭侧边栏
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    // 保存关闭状态到Cookie
    Cookies.set('sidebarStatus', 0)
    // 设置为关闭状态
    state.sidebar.opened = false
    // 根据参数决定是否使用过渡动画
    state.sidebar.withoutAnimation = withoutAnimation
  },

  // 设置设备类型
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  }
}

// 包含业务逻辑的操作函数（actions）
const actions = {
  // 触发侧边栏状态切换
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },

  // 关闭侧边栏，可选是否使用动画
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },

  // 切换设备类型
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

// 导出store模块
export default {
  namespaced: true, // 启用命名空间
  state, // 状态数据
  mutations, // 同步操作
  actions // 异步操作
}
